<template>
  <div class="customer_table">
    <el-table ref="multipleTable" :data="tableInfo.data" :highlight-current-row="true" border height="521" :row-key="getRowKey"
      :header-cell-style="{ background: '#f5f5f5' }" @selection-change="handleSelectionChange">
      <el-table-column v-if="selection" type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(item, index) in tableInfo.column" :key="index" :prop="item.prop" :label="item.label"
        :width="item.width || 'auto'" :sortable="item.sortable" align="center" :fixed="item.fixed">
        <template slot-scope="scope">
          <div v-if="item.type === 'index'">
            <span>{{ scope.$index + 1 }}</span>
          </div>
          <!--          操作区-->
          <div v-else-if="item.prop == 'job_status'">
            <span>{{ scope.row.job_status == 0 ? "——" : "" }}</span>
            <span>{{ scope.row.job_status == 1 ? "待执行" : "" }}</span>
            <span class="blue">{{ scope.row.job_status == 2 ? "执行中" : "" }}</span>
            <span class="org">{{ scope.row.job_status == 3 ? "暂停" : "" }}</span>
            <span class="red">{{ scope.row.job_status == 4 ? "中止" : "" }}</span>
            <span class="green">{{ scope.row.job_status == 5 ? "已完成" : "" }}</span>
          </div>
          <div v-else-if="item.prop === 'action'" class="operation">
            <template v-if="item.type === 'PatrolSceneManagement'">
              <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="viewDetails(scope.row)" type="text" size="small">查看详情</el-button>
              <el-button @click="createdTask(scope.row)" type="text" size="small">新建任务</el-button>
            </template>
            <template v-else-if="item.type === 'PatrolInspectionTaskManagement'">
              <el-button @click="actionClick(scope.row, 'taskSwitch')" type="text" size="small"
                :disabled="scope.row.job_issued_status == 0 ? false : true">下发</el-button>
              <el-button @click="actionClick(scope.row, 'start')" type="text" size="small"
                :disabled="(scope.row.job_issued_status == 1 && (scope.row.job_status == 1 || scope.row.job_status == 4 || scope.row.job_status == 5)) ? false : true">启动</el-button>
              <el-button @click="actionClick(scope.row, 'pause')" type="text" size="small"
                :disabled="(scope.row.job_issued_status == 1 && scope.row.job_status == 2) ? false : true">暂停</el-button>
              <el-button @click="actionClick(scope.row, 'continue')" type="text" size="small"
                :disabled="(scope.row.job_issued_status == 1 && scope.row.job_status == 3) ? false : true">继续</el-button>
              <el-button @click="actionClick(scope.row, 'returnVoyage')" type="text" disabled>一键返航</el-button>
              <el-button @click="actionClick(scope.row, 'details')" type="text" size="small">详情</el-button>
              <el-button @click="actionClick(scope.row, 'delete')" type="text" size="small"
                :disabled="(scope.row.job_issued_status == 0 || (scope.row.job_issued_status == 1 && scope.row.job_status == 1)) ? false : true">删除</el-button>
            </template>
          </div>
          <div v-else>
            {{ scope.row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CustomerTable",
  props: {
    tableInfo: {
      type: Object,
      default: () => { },
    },
    selection: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    edit(row) {
      this.$emit("edit", row);
    },
    deleteRow(row) {
      this.$emit("deleteRow", row);
    },
    viewDetails(row) {
      this.$emit("viewDetails", row);
    },
    createdTask(row) {
      // console.log(row);
      this.$router.push({
        path: `/ScenarioTaskManagementAdd?scenario_id=${row.scenario_id}`,
      });
      // this.$emit('createdTask', row)
    },
    actionClick(row, type) {
      this.$emit("actionClick", row, type);
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        const newRows = val.filter((it, index) => {
          if (index == val.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.$emit("handleSelectionChange", newRows);
      } else {
        this.$emit("handleSelectionChange", val);
      }
    },
    getRowKey(row) {
      console.log(row, 'row22');
      return row.robotNumber;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__header {
  .el-table__cell {
    background-color: #f6f6f6;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}

/deep/ .el-button {
  font-size: 14px;
}

/deep/ .el-button.is-disabled {
  color: #c0c4cc !important;
}

.blue {
  color: #409eff;
}

.org {
  color: #f59a23;
}

.red {
  color: red;
}

.green {
  color: #70b603;
}
/deep/.el-table .el-table__header-wrapper .el-table__header  .el-checkbox {
  display: none;
}
</style>
